<template>
  <div>
    <div class="app-container flex-box">
      <div class="container">
        <el-row>
          <el-col :span="4" class="gray-text">登录账号: <span style="color:#333">{{user.username}}</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form :rules="formRules" ref="dataForm" :model="pwd_bean" label-position="left" label-width="140px"
                     style='width: 400px; margin-left:50px;'>
              <template>
                <div class="title">登录密码</div>
                <el-form-item label="输入旧密码" prop="old_pwd">
                  <el-input v-model="pwd_bean.old_pwd" placeholder="输入旧密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" prop="new_pwd">
                  <el-input v-model="pwd_bean.new_pwd" placeholder="输入新密码"  type="password"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码" prop="new2_pwd">
                  <el-input v-model="pwd_bean.new_pwd_confirm" placeholder="再次输入新密码"  type="password"></el-input>
                </el-form-item>
              </template>
              <div class="center_btn">
                <el-button type="primary" @click="savePwd" :loading="dealing">保存</el-button>
              </div>
            </el-form>
          </el-col>
          <el-col :span="12">
            <el-form :rules="formRules2" ref="dataForm2" :model="pwd_bean" label-position="left" label-width="140px"
                     style='width: 400px; margin-left:50px;'>
              <template>
                <div class="title">安全密码</div>
                <el-form-item label="输入旧密码" prop="old_pwd">
                  <el-input v-model="pwd_bean2.old_pwd" placeholder="输入旧密码"  type="password"></el-input>
                </el-form-item>
                <el-form-item label="输入新密码" prop="new_pwd">
                  <el-input v-model="pwd_bean2.new_pwd" placeholder="输入新密码"  type="password"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码" prop="new2_pwd">
                  <el-input v-model="pwd_bean2.new_pwd_confirm" placeholder="再次输入新密码"  type="password"></el-input>
                </el-form-item>
              </template>
              <div class="center_btn">
                <el-button type="primary" @click="savePwd2" :loading="dealing2">保存</el-button>
              </div>
            </el-form>
          </el-col>
        </el-row>


      </div>
    </div>
  </div>
</template>
<script>
  import waves from '@/directive/waves' // 水波纹指令
  import API from '@/api'
  import Http from '@/http'
  import Store from '@/store'
  import Msg from '@/utils/msg'
  import Utils from '@/utils/common'
  import Validator from '@/utils/validate'
  import Auth from '@/auth'
  import _ from 'underscore'
  import Qiniu from '@/utils/qiniu'
  import {mapState, mapGetters} from 'vuex'
  import cityDate from '@/utils/city.js'

  let Base64 = require('js-base64').Base64;

  export default {
    directives: {waves},
    data() {
      return {
        pwd_bean: {},
        formRules: {
          old_pwd: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
          new_pwd: [{required: true, message: '请输入新密码', trigger: 'blur'}],
          new_pwd_confirm: [{required: true, message: '请确认新密码', trigger: 'blur'}],
        },
        dealing: false,
        pwd_bean2: {},
        formRules2: {
          old_pwd: [{required: true, message: '请输入旧密码', trigger: 'blur'}],
          new_pwd: [{required: true, message: '请输入新密码', trigger: 'blur'}],
          new_pwd_confirm: [{required: true, message: '请确认新密码', trigger: 'blur'}],
        },
        dealing2: false,
      }
    },
    computed: {
      ...mapGetters(['user']),
    },
    components: {},
    created() {
      console.log("this", this.user)
    },
    methods: {
      savePwd() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var pwd_bean = this.pwd_bean
            if (pwd_bean.new_pwd != pwd_bean.new_pwd_confirm) {
              Msg.error('两次输入密码不一致！')
            } else {
              this.dealing = true
              for (let key in pwd_bean) {
                pwd_bean[key] = Base64.encode(pwd_bean[key]);
              }
              Http.getModel(API.save_new_pwd, pwd_bean, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  Msg.success(json.msg, () => {
                    this.pwd_bean = {}
                  })
                } else {
                  Msg.error(json.msg)
                }
              })
            }
          }
        })
      },
      savePwd2() {
        this.$refs['dataForm2'].validate((valid) => {
          if (valid) {
            var pwd_bean2 = this.pwd_bean2
            if (pwd_bean2.new_pwd != pwd_bean2.new_pwd_confirm) {
              Msg.error('两次输入密码不一致！')
            } else {
              this.dealing2 = true
              for (let key in pwd_bean) {
                pwd_bean2[key] = Base64.encode(pwd_bean2[key]);
              }
              Http.getModel(API.save_new_safe_pwd, pwd_bean, false).then((json) => {
                this.dealing = false
                if (json.code == 0) {
                  Msg.success(json.msg, () => {
                    this.pwd_bean = {}
                  })
                } else {
                  Msg.error(json.msg)
                }
              })
            }
          }
        })
      },
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .container {
    margin: 40px auto;
    padding: 40px;
    .title {
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      line-height: 3.2em;
    }
    .center_btn {
      button {
        margin: 20px auto;
        display: block;
      }
    }
  }

  .el-row {
    margin-bottom: 20px;
    line-height: 40px;
    .gray-text {
      color: #aaa;
      text-align: left;
    }
    .border-col {
    }
  }

  .open-btn {
    display: block;
  }

</style>
